import React, { useMemo, useRef } from 'react'
import SearchForm from './component'
import { EnumElement, IBaseFormConfig } from './type'

const SearchFormDemo: React.FC<any> = () => {
  const baseFormRef = useRef<React.ElementRef<typeof SearchForm>>(null) // 搜索组件 ref
  const handleAdd = () => {}
  const handleQuery = () => {
    const queryInfo = baseFormRef.current?.baseFormInstance.getFieldsValue() // 获取搜索组件参数
    const [startTime, endTime] = queryInfo.dates ?? [] // 解构时间
    console.log(startTime, endTime)
  }
  const handleReset = () => {}
  const searchFormConfig = useMemo<IBaseFormConfig>(
    () => ({
      layout: 'inline', // 表单排版
      initialValues: {}, // 初始值
      // 组件
      elements: [
        {
          key: 'add',
          type: EnumElement.BUTTON,
          label: '新增',
          onClick: handleAdd
        },
        {
          key: 'status',
          type: EnumElement.SELECT,
          label: '状态',
          field: 'status',
          options: [
            { key: '1', label: '待提交', value: '1' },
            { key: '2', label: '待审核', value: '2' },
            { key: '3', label: '已驳回', value: '3' },
            { key: '4', label: '审核中', value: '4' },
            { key: '5', label: '审核通过', value: '5' },
            { key: '6', label: '审核不通过', value: '6' }
          ],
          formItemProps: {
            style: { width: '200px' }
          }
        },
        {
          key: 'range_picker_dates',
          type: EnumElement.RANGEPICKER,
          label: '起止日期',
          field: 'dates'
        },
        {
          key: 'query',
          type: EnumElement.BUTTON,
          label: '查询',
          onClick: handleQuery
        },
        {
          key: 'reset',
          type: EnumElement.BUTTON,
          label: '重置',
          onClick: handleReset
        }
      ]
    }),
    []
  )
  return <SearchForm ref={baseFormRef} config={searchFormConfig} />
}
export default SearchFormDemo
